<!doctype html>
<html lang="en">

<head>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/css/ol.css" type="text/css">
    <style>
        .map {
            height: 400px;
            width: 100%;
        }

        body,
        html,
        #map {
            /*:root等同html*/
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.2.1/build/ol.js"></script>
    <title>OpenLayers example</title>
    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
</head>

<body>
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
        var map = new ol.Map({
            target: 'map',
            
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.XYZ({
                    url: 'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
                    })
                })
            ],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [116.65472439, 40.3266997],
                zoom: 4,
                maxZoom: 12
            })
        });


        var line = turf.lineString([[86.462787875,47.02467856819814],[98.855366,45.75165348070709],[103.865131625,42.60105041917453]]);
        var buffered = turf.buffer(line, 300, { units: 'kilometers' });
        //创建数据geojson对象和数据源对象
        var format = new ol.format.GeoJSON();
        var source = new ol.source.Vector()
        //读取geojson数据
        var a = format.readFeature(line);
        var b = format.readFeature(buffered);
        //将数据添加数据源的
        source.addFeature(a);
        source.addFeature(b);
        //添加图层
        var test = new ol.layer.Vector({ source: source })
        map.addLayer(test);

    </script>
</body>

</html>